<template>

  <div>

    <el-row :gutter="10">

      <!--中间左边-->
      <el-col :span="8">

        <el-card shadow="never">

          <el-row>
            <el-col :span="10">
              <el-input placeholder="输入关键字进行过滤" size="mini" v-model="filterComputerText"></el-input>
            </el-col>
            <el-col :span="14">
              <el-button style="margin-left: 10px" @click="openSaveBefore()" type="primary" :size="layoutCss.size">新增</el-button>
            </el-col>
          </el-row>


          <!-- 节点树-->
          <!--
            indent 是防止树之间的间隔太大，这里要加样式才需要这个
            accordion 同一个节点，一次只能打开一个，防止树太大
          -->
          <div style="border: 1px solid #B9AEB2; margin-top: 10px; overflow-x: auto; min-height: 600px">
            <el-tree style="min-width: 100%; width: max-content;"
                     class="tree flow-tree errMdList" :indent='0'
                     :data="computerTree.dataTree"
                     default-expand-all
                     node-key="id"
                     :accordion="false"
                     :filter-node-method="filterNode"
                     :highlight-current="computerTree.highlightSelect"
                     :check-on-click-node="computerTree.checkClick"
                     :expand-on-click-node="computerTree.expandClickNode"
                     ref="treeComputer"
                     @node-click="handleNodeClick"
            >
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <el-image class="os-icon" v-if="data.os === 1" fit="contain" :src="require('@/assets/images/os/linux.png')"/>
                <el-image class="os-icon" v-else-if="data.os === 2" fit="contain" :src="require('@/assets/images/os/Windows.png')"/>
                <el-image class="os-icon" v-else-if="data.os === 3" fit="contain" :src="require('@/assets/images/os/mac.png')"/>
                <el-image class="os-icon" v-else-if="data.os === 4" fit="contain" :src="require('@/assets/images/os/unix.png')"/>
                <el-image class="os-icon" v-else-if="data.os === 5" fit="contain" :src="require('@/assets/images/os/yhql.png')"/>
                <el-image class="os-icon" v-else-if="data.os === 6" fit="contain" :src="require('@/assets/images/os/tx.png')"/>
                <el-image class="os-icon" v-else-if="data.os === 7" fit="contain" :src="require('@/assets/images/os/deepin-1.png')"/>
                <el-image class="os-icon" v-else-if="data.os === 8" fit="contain" :src="require('@/assets/images/os/computer.png')"/>
                <el-image class="os-icon" v-else-if="data.os === 10" fit="contain" :src="require('@/assets/images/os/computer.png')"/>
                <el-image class="os-icon" v-else-if="data.os === 11" fit="contain" :src="require('@/assets/images/os/computer.png')"/>
                <el-image class="os-icon" v-else-if="data.os === 12" fit="contain" :src="require('@/assets/images/os/hm.png')"/>
                <el-image class="os-icon" v-else-if="data.os === 13" fit="contain" :src="require('@/assets/images/os/zbql.png')"/>
                <el-image class="os-icon" v-else fit="contain" :src="require('@/assets/images/os/computer.png')"/>
                <span>{{ data.name }} <span v-if="data.ips">[{{data.ips}}]</span></span>
                <span>
                  <el-button style="margin-left: 10px" type="text" size="mini" @click="() => openSonComputerBefore(data)">新增</el-button>
                  <el-button type="text" size="mini" @click.stop="() => openUpdBefore(data)">修改</el-button>
                  <el-button type="text" size="mini" @click.stop="() => getTransfer(data)">迁移</el-button>
                  <el-button v-show="data.children == null || data.children.length === 0" type="text" size="mini" @click="() => delTips(data)">删除</el-button>
                </span>
              </span>
            </el-tree>
          </div>

        </el-card>

      </el-col>





      <!--中间右边-->
      <el-col :span="16">

        <el-card shadow="never" style="min-height: 680px">
          <el-tabs v-model="elTab.activeName" type="card" @tab-click="handleTabClick">
            <el-tab-pane label="基础信息" name="home">
              <ComputerServerDetailed ref="ComputerServerDetailedRef"/>
            </el-tab-pane>


            <el-tab-pane label="访问登录" name="second">
              <div style="min-height: 500px; max-height: 700px; overflow-y: auto; margin-bottom: 20px">
                <el-divider content-position="left"><span style="color: coral">计算机访问授权</span></el-divider>
                <!--md预览展示-->
                <mavon-editor v-model="elTab.computerServerVo.access1" style="font-size: 14px" :subfield="false" :defaultOpen="'preview'" :editable="false" :toolbarsFlag="false" />
              </div>
            </el-tab-pane>


            <el-tab-pane label="关键资源" name="third">
              <OpsComputerFileList ref="ComputerFileListRef"/>
            </el-tab-pane>


            <el-tab-pane label="应用" name="app">
              <OpsDeployAppList ref="OpsDeployAppListRef" :computerServerId="this.elTab.computerServerId"/>
            </el-tab-pane>


            <el-tab-pane label="组件" name="service">
              <OpsDeployComponentList ref="OpsDeployComponentListRef" :computerServerId="this.elTab.computerServerId"/>
            </el-tab-pane>


            <el-tab-pane label="工具" name="tool">
              <OpsDeployToolList ref="OpsDeployToolListRef" :computerServerId="this.elTab.computerServerId"/>
            </el-tab-pane>


            <el-tab-pane label="端口管理" name="ports">
              <PortList ref="PortListRef" :computerServerId="this.elTab.computerServerId"/>
            </el-tab-pane>

            <el-tab-pane label="定时任务" name="task">功能正在开发中，敬请期待......</el-tab-pane>
            <el-tab-pane label="巡检" name="review">功能正在开发中，敬请期待......</el-tab-pane>
            <el-tab-pane label="实时数据采集" name="collect">功能正在开发中，敬请期待......</el-tab-pane>
          </el-tabs>
        </el-card>

      </el-col>

    </el-row>


    <ComputerServerSaveUpd ref="OpsComputerServerSaveUpdRef" @getComputerServerTree="getComputerServerTree"/>
    <ComputerServerTransfer ref="ComputerServerTransferRef" @getComputerServerTree="getComputerServerTree"/>
  </div>

</template>



<script>

import http from '@/utils/http'
import {checkNull, clearInvalid} from "@/utils/utils"
import ComputerServerSaveUpd from './ComputerServerSaveUpd.vue'
import ComputerServerTransfer from './ComputerServerTransfer.vue'
import ComputerServerDetailed from './ComputerServerDetailed.vue'
import OpsComputerFileList from './OpsComputerFileList.vue'
import OpsDeployAppList from '@/components/deploy/OpsDeployAppList.vue'
import OpsDeployComponentList from '@/components/deploy/OpsDeployComponentList.vue'
import OpsDeployToolList from '@/components/deploy/OpsDeployToolList.vue'
import PortList from '@/components/deploy/PortList.vue'



export default {
  name: "OpsComputerServerList",
  components: {
    ComputerServerSaveUpd,
    ComputerServerDetailed,
    OpsComputerFileList,
    OpsDeployAppList,
    OpsDeployComponentList,
    OpsDeployToolList,
    PortList,
    ComputerServerTransfer,
  },
  data() {
    return {
      // 标签页信息
      elTab:{
        // 被选中的标签
        activeName: 'home',
        // 被选中的节点
        computerServerId: null,
        // 被选中的计算机详情
        computerServerVo: {},
      },
      // 搜索条件
      filterComputerText: '',
      // css
      layoutCss :{
        size: 'mini',
      },
      // 场所信息
      site:{},
      // 查询参数
      searchOpsComputerServerParam: {
        id: null,
        siteId: null,
        name: null,
        ips: null,
        access1: null,
        access2: null,
        access3: null,
        cloudType: null,
        vm: null,
        cpu: null,
        core: null,
        memory: null,
        disk: null,
        accessNetworkSizeUp: null,
        accessNetworkSizeDown: null,
        parentId: null,
        parentIds: null,
        hostName: null,
        special: null,
        useStatus: null,
        storageLocation: null,
        os: null,
        osVersion: null,
        linchpin: null,
        description: null,
        createTime: null,
        updateTime: null,
        updateId: null,
        createId: null,
        delType: null,
      },
      // 计算机树
      computerTree: {
        dataTree: [],
        // 是否高亮选中
        highlightSelect: true,
        // 是否在点击节点的时候选中节点，默认值为 false，即只有在点击复选框时才会选中节点。
        checkClick: false,
        // 是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。
        expandClickNode: false,
      },
      // 云主机类型
      cloudTypeOpt: [
        {code: '', name: ''},
      ],
    }
  },
  methods: {
    /**
     * 标签页被点击的时候
     * @param tab
     * @param event
     */
    handleTabClick(tab, event){
      console.log(this.elTab.activeName)
    },
    /**
     * 节点被点击时的回调-树被点击
     * @param data 当前被选中的节点
     */
    handleNodeClick(data){
      this.elTab.computerServerId = data.id
      this.getComputerServerDetails()
      this.getComputerFileList()
    },
    /**
     * 过滤查询树
     * @param value 要过滤的值，查询的数据
     * @param data 当前节点数据
     * @param node 节点信息
     * @return {boolean}  返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏
     */
    filterNode(value, data, node) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    /**
     * 生成随机数
     * 解决如果控制台报错Maximum call stack size exceeded
     * 那就是row-key绑定的值重复了
     */
    generateRowKey(row){
      return row.id + '_' + Math.random().toString(36).substr(2, 9);
    },
    /**
     * 打开保存的弹框
     */
    openSaveBefore() {
      this.$refs.OpsComputerServerSaveUpdRef.init('save', null, null)
    },
    /**
     * 打开修改之前的的弹出框
     * @param obj 修改的值
     */
    openUpdBefore(obj) {
      this.$refs.OpsComputerServerSaveUpdRef.init('upd', obj, null)
    },
    /**
     * 获取可迁移的目标计算机
     * @param obj
     */
    getTransfer(obj){
      this.$refs.ComputerServerTransferRef.init(obj)
    },
    /**
     * 新增子级计算机之前的弹出框
     * @param obj 修改的值
     */
    openSonComputerBefore(obj){
      this.$refs.OpsComputerServerSaveUpdRef.init('save', null, obj)
    },
    /**
     * 删除之前的提示框
     * @param obj 要删除的数据
     */
    delTips(obj) {
      this.$confirm('是否执行删除, 删除后无法恢复，是否继续?', '提示', {
        confirmButtonText: '确定删除',
        cancelButtonText: '取消删除',
        type: 'warning'
      }).then(() => {
        // 确定删除
        this.delOpsComputerServer(obj)

      }).catch(() => {
        // 取消删除
      });
    },
    /**
     * 删除
     * @param obj 要删除的数据
     */
    delOpsComputerServer(obj) {
      http.post("/computer/delComputerServer", {
        computerServerId: obj.id,
      }).then(response => {
        let res = response.data;

        this.getComputerServerTree()
        this.$message.success("删除成功");

      }).catch(error => {
        this.$message.error(error.message);
      })
    },
    /**
     * 重置查询条件
     */
    resetQuery() {
      this.searchOpsComputerServerParam = {
        name: null,
        code: null,
      }
    },
    /**
     * 获取计算机关键文件和目录
     */
    getComputerFileList(){
      if (!this.elTab.computerServerId){
        return
      }
      this.$refs.ComputerFileListRef.openInit(this.elTab.computerServerId)
    },
    /**
     * 计算机详情
     */
    getComputerServerDetails() {
      if (!this.elTab.computerServerId){
        return
      }
      http.post("/computer/getComputerServerDetails", {
        computerServerId: this.elTab.computerServerId
      }).then(response => {
        let res = response.data;
        this.elTab.computerServerVo = res.data
        this.$refs.ComputerServerDetailedRef.openComputerServerDetailed(this.elTab.computerServerVo)

      }).catch(error => {
        this.$message.error(error.message);
      })
    },
    /**
     * 分页查询列表
     */
    getComputerServerTree() {
      this.searchOpsComputerServerParam.siteId = this.$route.query.siteId
      http.post("/computer/getComputerServerTree", this.searchOpsComputerServerParam).then(response => {
        let res = response.data;
        if (!res.success) {
          // 401是token过期跳转的
          if (res.code !== 401) {
            this.$message.error(res.msg);
          }
          return
        }
        // 表格数据
        this.computerTree.dataTree = res.data

        // 默认展示第一条
        if (checkNull(this.elTab.computerServerId)){
          if (this.computerTree.dataTree && this.computerTree.dataTree.length > 0) {
            this.handleNodeClick(this.computerTree.dataTree[0])
          }
        }

      }).catch(error => {
        this.$message.error(error.message);
      })
    },
    /**
     * 获取云主机类型
     */
    getCloudType(){
      http.post("/computer/getCloudType", null).then(response => {
        let res = response.data;
        if (!res.success) {
          // 401是token过期跳转的
          if (res.code !== 401){
            this.$message.error(res.msg);
          }
          return
        }
        this.cloudTypeOpt = res.data

      }).catch(error => {
        this.$message.error(error.message);
      })
    },
    /**
     * 根据主键查询场所信息
     */
    getSiteById() {
      http.post("/opsSite/getSiteById", {
        siteId: this.$route.query.siteId,
      }).then(response => {
        let res = response.data;
        if (!res.success) {
          // 401是token过期跳转的
          if (res.code !== 401) {
            this.$message.error(res.msg);
          }
          return
        }
        this.site = res.data

      }).catch(error => {
        this.$message.error(error.message);
      })
    },
  },
  watch: {
    /**
     * 监听值的变化
     * @param val 发生变化的数据
     */
    filterComputerText(val){
      this.$refs.treeComputer.filter(val);
    },
  },
  // 进入马上执行
  mounted() {
    this.getSiteById()
    this.getComputerServerTree()
    this.getCloudType()

    this.$store.commit('navigationListChange', [
      {name: '场所列表', url: '/toSiteList', query: {}},
      {name: '场所详情', url: '/toSiteLayout', query: {siteId: this.$route.query.siteId}},
      {name: '计算机管理', url: '/toComputerServerList', query: {siteId: this.$route.query.siteId}},
    ])
  },
}
</script>

<style scoped>

.os-icon{
  width: 20px;
  height: 18px;
  vertical-align: middle;
  margin-right: 5px;
}

</style>




<style scoped>

/*
 文件管理器 start =========================
 */
/* 给树加虚线 == start */
.tree-container {
  overflow: hidden;
}
.tree /deep/ .el-tree-node {
  position: relative;
  padding-left: 0 ;
}
.tree /deep/ .el-tree-node__children {
  padding-left: 16px;
}
.tree /deep/ .el-tree-node :last-child:before {
  height: 12px;
}
.tree /deep/ .el-tree > .el-tree-node:before {
  border-left: none;
}
.tree-container /deep/ .el-tree > .el-tree-node:after {
  border-top: none;
}
.tree /deep/ .el-tree-node:before {
  content: '';
  left: -4px;
  position: absolute;
  right: auto;
  border-width: 1px;
  border-left: 1px dashed #4386c6;
  bottom: 0px;
  height: 100%;
  top: 0px;
  width: 1px;
}
.tree /deep/ .el-tree-node:after {
  content: '';
  left: -4px;
  position: absolute;
  right: auto;
  border-width: 1px;
  border-top: 1px dashed #4386c6;
  height: 20px;
  top:12px;
  width: 10px ;
}

/*树加滚动条*/
/deep/.el-tree {
  width: 100%;
  height: 720px;
  max-height: 720px;
  overflow: scroll;
}
/deep/.el-tree>.el-tree-node {
  display: inline-block;
  min-width: 100%;
}

/*滚动条美化*/
.errMdList{
  /*width: 50%;*/
  /*max-height: 61vh;*/
  overflow: auto;
  border: 1px solid #ddd;
}
.errMdList::-webkit-scrollbar {
  /*width: 8px;*/
}
.errMdList::-webkit-scrollbar-track {
  background-color:#fff;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius:2em;
}
.errMdList::-webkit-scrollbar-thumb {
  background-color:#c0dbfb;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius:2em;
}
/* 给树加虚线 == end */


/*
 文件管理器 end =========================
 */

</style>
